<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :class="{ readonly: readOnly }"
      :custom-class="'panna-dialog_medium'"
      :title="title"
      :append-to-body="true"
      :visible="innerDialogFormVisible"
      :before-close="handleClose"
      @closed="closedDialog"
    >
      <p slot="title">{{ title }}</p>
      <el-form
        ref="formData"
        class="base-pipeline-layout system-samplecategory-form"
        :model="formData"
        :rules="formDataRules"
        status-icon
        label-width="100px"
      >
        <el-form-item
          :label="sysBusinessSampleCategory.superiorSample"
          :placeholder="sysBusinessSampleCategory.selectSuperiorSample"
          prop="parentId"
          :error="errorMsg.parentId"
        >
          <TreeSelect v-model="formData.parentId" :tree-data="sampleTreeData" />
        </el-form-item>

        <el-form-item
          :label="sysBusinessSampleCategory.name"
          prop="sampleCategoryName"
          :error="errorMsg.sampleCategoryName"
        >
          <el-input
            v-model="formData.sampleCategoryName"
            :placeholder="sysBusinessSampleCategory.enterName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.sampleCategoryID"
          prop="sampleCategoryNum"
          :error="errorMsg.sampleCategoryNum"
        >
          <el-input
            v-model="formData.sampleCategoryNum"
            :placeholder="sysBusinessSampleCategory.enterSampleCategory"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.alias"
          prop="anotherName"
          :error="errorMsg.anotherName"
        >
          <el-input
            v-model="formData.anotherName"
            :placeholder="sysBusinessSampleCategory.alias"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.code"
          prop="sampleCategoryCode"
          :error="errorMsg.sampleCategoryCode"
        >
          <el-input
            v-model="formData.sampleCategoryCode"
            :placeholder="sysBusinessSampleCategory.enterCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.sampleForm"
          prop="shape"
          :error="errorMsg.shape"
        >
          <el-input
            v-model="formData.shape"
            :placeholder="sysBusinessSampleCategory.enterSampleForm"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.singleCapacity"
          prop="capacity"
          :error="errorMsg.capacity"
        >
          <el-input
            v-model="formData.capacity"
            :placeholder="sysBusinessSampleCategory.enterSingleCapacity"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.liter"
          prop="capacityUnit"
          :error="errorMsg.capacityUnit"
        >
          <el-input
            v-model="formData.capacityUnit"
            :placeholder="sysBusinessSampleCategory.enterCapacityUnit"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.countingUnit"
          prop="countingUnit"
          :error="errorMsg.countingUnit"
        >
          <el-input
            v-model="formData.countingUnit"
            :placeholder="sysBusinessSampleCategory.enterCountingUnit"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.categoryLevel"
          prop="level"
          :error="errorMsg.level"
        >
          <el-input
            v-model="formData.level"
            :placeholder="sysBusinessSampleCategory.enterCategoryLevel"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessSampleCategory.inspectionBasis"
          :label-width="formLabelWidth"
          prop="inspectionBasis"
          :error="errorMsg.inspectionBasis"
        >
          <el-input
            v-model="formData.inspectionBasis"
            autocomplete="off"
            maxlength="50"
            clearable
            :placeholder="sysBusinessSampleCategory.inspectionCriteria"
          ></el-input>
        </el-form-item>
      </el-form>
      <!--div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="onSubmit('formData')"
          >确 定</el-button
        >
      </div-->

      <span v-if="!readOnly" slot="footer" class="base-dialog-footer">
        <el-button
          type="primary"
          :disabled="!submitReadOnly"
          @click="onSubmit('formData')"
          >{{ operateType.save }}</el-button
        >
        <el-button @click="handleClose">{{ operateType.cancel }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  create,
  update,
  getSampleCategory,
} from "../../../../api/DetectionItemManage/SysBusinessSampleCategory.js";
import TreeSelect from "@/components/BaseTreeSelect/index.vue";
import _ from "lodash";
export default {
  name: "SysBusinessSampleCategoryEdit",
  components: { TreeSelect },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      sampleTreeData: [],
      title: "",
      initData: {
        id: 0,
        parentId: "",
        sampleCategoryName: "",
        sampleCategoryNum: "",
        anotherName: "",
        sampleCategoryCode: "",
        shape: "",
        capacity: "",
        capacityUnit: "",
        countingUnit: "",
        level: 0,
        inspectionBasis: "",
      },
      formData: {
        id: 0,
        parentId: "",
        sampleCategoryName: "",
        sampleCategoryNum: "",
        anotherName: "",
        sampleCategoryCode: "",
        shape: "",
        capacity: "",
        capacityUnit: "",
        countingUnit: "",
        level: 0,
        inspectionBasis: "",
      },
      formDataRules: {
        parentId: [
          {
            required: true,
            message: this.$t("SysBusinessSampleCategory.selectSuperior"),
            trigger: "change",
          },
        ],
        sampleCategoryName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        parentId: "",
        sampleCategoryName: "",
        sampleCategoryNum: "",
        anotherName: "",
        sampleCategoryCode: "",
        shape: "",
        capacity: "",
        capacityUnit: "",
        countingUnit: "",
        level: "",
        inspectionBasis: "",
      },
      errorMsg: {
        parentId: "",
        sampleCategoryName: "",
        sampleCategoryNum: "",
        anotherName: "",
        sampleCategoryCode: "",
        shape: "",
        capacity: "",
        capacityUnit: "",
        countingUnit: "",
        level: "",
        inspectionBasis: "",
      },
      submitReadOnly: true,
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessSampleCategory() {
      return this.$t("SysBusinessSampleCategory") || {};
    },
  },
  watch: {
    value: function() {
      this.innerDialogFormVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
      this.init();
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  methods: {
    init() {
      this.title = this.$t("SysBusinessSampleCategory.sampleCategory");
      if (this.editId) {
        this.getSampleCategoryData();
      }
    },
    getSampleCategoryData() {
      getSampleCategory({ id: this.editId }).then((res) => {
        this.formData = res.data;
      });
    },
    cancel() {
      this.$emit("update:editId", "");
      this.innerDialogFormVisible = false;
    },
    // 关闭弹框
    handleClose() {
      this.$emit("update:editId", "");
      this.$emit("input", false);
      this.innerDialogFormVisible = false;
    },

    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.formData.resetFields();
      this.$emit("input", false);
      this.$parent.getList();
      // this.cancel();
    },
    onSubmit: _.throttle(function() {
      if (this.submitReadOnly) {
        this.submitReadOnly = false;
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
            if (this.formData.id <= 0) {
              create(this.formData)
                .then((res) => {
                  if (res.code === 200) {
                    this.submitReadOnly = true;

                    this.handleClose();
                  } else {
                    this.submitReadOnly = true;

                    this.showValidateMsgCheck(res);
                  }
                  this.submitReadOnly = true;

                  this.loading = false;
                })
                .catch(() => {
                  this.submitReadOnly = true;
                  this.loading = false;
                });
            } else {
              update(this.formData)
                .then((res) => {
                  if (res.code === 200) {
                    this.submitReadOnly = true;

                    this.handleClose();
                  } else {
                    this.submitReadOnly = true;

                    this.showValidateMsgCheck(res);
                  }
                  this.submitReadOnly = true;
                  this.loading = false;
                })
                .catch(() => {
                  this.submitReadOnly = true;
                  this.loading = false;
                });
            }
          } else {
            this.submitReadOnly = true;
            return false;
          }
        });
      }
    }, 2000),
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("parentId", this.errorMsg, res.msg);
        this.Helper.showValidateMsg(
          "sampleCategoryName",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg(
          "sampleCategoryNum",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("anotherName", this.errorMsg, res.msg);
        this.Helper.showValidateMsg(
          "sampleCategoryCode",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("shape", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("capacity", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("capacityUnit", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("countingUnit", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("level", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.system-samplecategory-form {
  // padding-bottom: 24px;
  .relay-only-value {
    margin-bottom: 2px;
  }
  .default-form-item {
    display: block;
    height: 84px;
  }
}

.add {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  margin-left: 10px;
  float: left;
  position: absolute;
  top: 0px;
  left: 121px;
}
.delete {
  background-color: rgb(194, 194, 194);
  left: 170px;
  font-size: 12px;
  border-radius: 10px;
}
</style>
